const flexible = () => {
    const docEl = document.documentElement;

    function setRemUnit () {
        const docWidth = docEl.clientWidth;
        const rem = docWidth / 10;
        docEl.style.fontSize = rem + 'px';
    }

    window.addEventListener('resize', () => {
        setRemUnit();
    }, false);

    window.addEventListener('pageshow', (e) => {
        if (e.persisted) {
            setRemUnit();
        }
    }, false);

    setRemUnit();

    if (window.devicePixelRatio && window.devicePixelRatio >= 2) {
        const testEl = document.createElement('div');
        const fakeBody = document.createElement('body');

        testEl.style.border = '0.5px solid transparent';
        fakeBody.appendChild(testEl);
        docEl.appendChild(fakeBody);

        if (testEl.offsetHeight === 1) {
            docEl.classList.add('hairlines');
        }
        docEl.removeChild(fakeBody);
    }
};

export default flexible;
